<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: '1',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5daddaa651568673e87eaf7c15ebd1cb.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi Turbo 3',
    tname: '性能旋风,席卷而来',
    sname: '1799元起',
    delname: '1999元'
  },
  {
    id: '2',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402221350_8181b68062669419dcb35b42972021e3.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi Civi 4 Pro',
    tname: '光学Summilux镜头|5000万像素',
    sname: '2799元起'
  },
  {
    id: '3',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402211712_15046d7abe233750b635d0ff3a53ae02.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Ultra',
    tname: '全明星四摄|双向卫星通信',
    sname: '5999元起'
  },
  {
    id: '4',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202402211658_f8e48c3ab022eede514cc6ef6412a48b.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70 Pro',
    tname: '第三代骁龙8 年度旗舰平台',
    sname: '2799元起',
    delname: '2999元'
  },
  {
    id: '5',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281956_f87f4c37af45c2261e944f57d29e4a03.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70',
    tname: '第二代骁龙8 旗舰芯',
    sname: '2299元起'
  },
  {
    id: '6',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202311281948_e41396e545d3ba8da294444a47abb590.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Redmi K70E',
    tname: '新一代旗舰焊门员',
    sname: '1799元起'
  },
  {
    id: '7',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309191420_60b81344a77b3104319e8a9f199ed0fd.png?thumb=1&w=200&h=200&f=webp&q=90',
    oname: 'Xiaomi 14 Pro',
    tname: '可变光圈镜头',
    sname: '4599元起'
  },
  {
    id: '8',
    src: 'https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202309151909_5d9c4624dd45a4f37d516954b0250e56.png?thumb=1&w=100&h=100&f=webp&q=90',
    oname: 'Xiaomi 14',
    tname: '光学Summilux镜头',
    sname: '3999元起'
  }
])
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h1>笔记本|平板</h1>
        <h1 style="text-align: center" class="more">
          <span>热门</span>
        </h1>
      </el-header>
      <el-container>
        <el-aside class="leftimg" width="234px">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bd88fa683214713a6acb1afcf738b89c.png?thumb=1&w=234&h=614&f=webp&q=90"
          />
        </el-aside>
        <el-main>
          <div class="container">
            <div
              class="item"
              v-for="item in data"
              :key="item.id"
              :style="{ height: item.id === 8 ? '143px' : '305px' }"
            >
              <img :src="item.src" class="image" style="width: 200px" />
              <div class="text">
                <p class="one">{{ item.oname }}</p>
                <p class="tow">{{ item.tname }}</p>
                <p class="seer">
                  {{ item.sname }}&nbsp;
                  <del style="color: #b0b0b0">{{ item.delname }}</del>
                </p>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style scoped lang="scss">
.common-layout {
  overflow: hidden;
  width: 1500px;
  height: 725px;
  margin: 1px auto;
  .leftimg {
    transition: all 0.5s;
    &:hover {
      cursor: pointer;
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
  }
  .el-header {
    display: flex;
    justify-content: space-between;
    .more {
      position: relative;
      right: 50px;
      top: -20px;
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #e26237;
      border-bottom: 2px solid #e26237;
    }
  }
  .el-main {
    padding: 0;
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        text-align: center;
        flex-basis: 25%;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          transform: translate3d(0, -3px, 0);
          box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
        }
        .text {
          .one {
            font-size: 12px;
          }
          .tow {
            color: #b0b0b0;
          }
          .seer {
            color: #e26237;
          }
        }
      }
    }
  }
}
</style>
